<template>
  <div class="map-echart">
    <BaseEcharts :options="options"></BaseEcharts>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "vuex";
import { defineComponent } from "vue";
import BaseEcharts from "@/base-ui/echarts";
import { IDataType } from "../types";
import * as echarts from "echarts";
import { convertData } from "../utils/convert-data";
export default defineComponent({
  components: {
    BaseEcharts
  },
  // props: {
  //   pieData: IDataType[],
  //  x的值 xLabels
  //  y的值 value data: [120, 132, 101, 134, 90, 230, 210]
  // },
  setup(props) {
    components: {
      BaseEcharts;
    }
    const store = useStore();
    const options = {
      backgroundColor: "#fff",
      title: {
        text: "全国销量统计",
        left: "center",
        textStyle: {
          color: "#fff"
        }
      },
      tooltip: {
        trigger: "item",
        formatter: function (params: any) {
          return params.name + " : " + params.value[2];
        }
      },
      visualMap: {
        min: 0,
        max: 60000,
        left: 20,
        bottom: 20,
        calculable: true,
        text: ["高", "低"],
        inRange: {
          color: ["rgb(70, 240, 252)", "rgb(250, 220, 46)", "rgb(245, 38, 186)"]
        },
        textStyle: {
          color: "#fff"
        }
      },
      // 地理编码
      geo: {
        map: "china",
        roam: "scale",
        emphasis: {
          areaColor: "#f4cccc",
          borderColor: "rgb(9, 54, 95)",
          itemStyle: {
            areaColor: "#f4cccc"
          }
        }
      },
      series: [
        {
          name: "销量",
          type: "scatter",
          coordinateSystem: "geo",
          // data: convertData(props.mapData),
          data: convertData([
            { name: "海门", value: 9 },
            { name: "鄂尔多斯", value: 12 },
            { name: "招远", value: 12 },
            { name: "舟山", value: 12 },
            { name: "齐齐哈尔", value: 14 },
            { name: "盐城", value: 15 },
            { name: "赤峰", value: 16 },
            { name: "青岛", value: 18 },
            { name: "乳山", value: 18 },
            { name: "金昌", value: 19 },
            { name: "泉州", value: 21 },
            { name: "莱西", value: 21 },
            { name: "日照", value: 21 },
            { name: "胶南", value: 22 },
            { name: "南通", value: 23 },
            { name: "拉萨", value: 24 },
            { name: "云浮", value: 24 },
            { name: "梅州", value: 25 },
            { name: "文登", value: 25 },
            { name: "上海", value: 25 },
            { name: "攀枝花", value: 25 },
            { name: "威海", value: 25 },
            { name: "承德", value: 25 },
            { name: "厦门", value: 26 },
            { name: "汕尾", value: 26 },
            { name: "潮州", value: 26 },
            { name: "丹东", value: 27 },
            { name: "太仓", value: 27 },
            { name: "曲靖", value: 27 },
            { name: "烟台", value: 28 },
            { name: "福州", value: 29 },
            { name: "瓦房店", value: 30 },
            { name: "即墨", value: 30 },
            { name: "抚顺", value: 31 },
            { name: "玉溪", value: 31 },
            { name: "张家口", value: 31 },
            { name: "阳泉", value: 31 },
            { name: "莱州", value: 32 },
            { name: "湖州", value: 32 },
            { name: "汕头", value: 32 },
            { name: "昆山", value: 33 },
            { name: "宁波", value: 33 },
            { name: "湛江", value: 33 },
            { name: "揭阳", value: 34 },
            { name: "荣成", value: 34 },
            { name: "连云港", value: 35 },
            { name: "葫芦岛", value: 35 },
            { name: "常熟", value: 36 },
            { name: "东莞", value: 36 },
            { name: "河源", value: 36 },
            { name: "淮安", value: 36 },
            { name: "泰州", value: 36 },
            { name: "南宁", value: 37 },
            { name: "营口", value: 37 },
            { name: "惠州", value: 37 },
            { name: "江阴", value: 37 },
            { name: "蓬莱", value: 37 },
            { name: "韶关", value: 38 },
            { name: "嘉峪关", value: 38 },
            { name: "广州", value: 38 },
            { name: "延安", value: 38 },
            { name: "太原", value: 39 },
            { name: "清远", value: 39 },
            { name: "中山", value: 39 },
            { name: "昆明", value: 39 },
            { name: "寿光", value: 40 },
            { name: "盘锦", value: 40 },
            { name: "长治", value: 41 },
            { name: "深圳", value: 41 },
            { name: "珠海", value: 42 },
            { name: "宿迁", value: 43 },
            { name: "咸阳", value: 43 },
            { name: "铜川", value: 44 },
            { name: "平度", value: 44 },
            { name: "佛山", value: 44 }
          ]),
          symbolSize: 12,
          emphasis: {
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            }
          }
        },
        {
          type: "map",
          map: "china",
          geoIndex: 0,
          aspectScale: 0.75,
          tooltip: {
            show: false
          }
        }
      ]
    };
    return {
      options
    };
  }
});
</script>
<style scoped lang="less"></style>
